<template>
  <div>
    <el-col :span="24">
      <basic-container>
        <el-collapse>
          <div class="card-header">
            <h3>
              <el-date-picker
                v-model="date"
                align="right"
                type="date"
                :clearable="false"
                placeholder="选择日期"
                @change="handleSearch"
                :picker-options="pickerOptions">
              </el-date-picker>
            </h3>
          </div>
          <template>
            <el-row v-loading="searching">
              <statics-car v-if="!searching" :date="date" title="日统计"></statics-car>
            </el-row>
          </template>
        </el-collapse>
      </basic-container>
    </el-col>
  </div>
</template>

<script>
import {mapGetters} from "vuex";
import StaticsCar from "@/views/wel/components/staticsCard";

export default {
  name: "wel",
  components: {StaticsCar},
  data() {
    return {
      searching: false,
      date: '',
      pickerOptions: {
        shortcuts: [{
          text: '后天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 3)
            picker.$emit('pick', date)
          }
        }, {
          text: '明天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24 * 2)
            picker.$emit('pick', date);
          }
        }, {
          text: '今天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() + 3600 * 1000 * 24)
            picker.$emit('pick', date);
          }
        }, {
          text: '昨天',
          onClick(picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '前天',
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }]
      },
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.init();
  },
  methods: {
    handleSearch(val) {
      this.date = val
      this.searching = true
      setTimeout(() => {
        this.searching = false
      }, 100)
    },
    init() {
      const date = new Date()
      date.setTime(date.getTime() + 3600 * 1000 * 24)
      this.date = date
      this.handleSearch(date)
    },
  },
};
</script>

<style scoped>

.card-header {
  background-color: #f5f7fa;
  padding: 10px;
  text-align: center;
}
</style>
